<template>
    <div>
        <h1>workFlow</h1>
        <Anchor title="概述" h2></Anchor>
        <p>使用workFlow组件，可以根据流程模板ID获取流程信息，根据业务ID获取业务流程信息，并根据向后提交或回退业务，获取流程驱动数据。</p>
        <Anchor title="代码示例" h2></Anchor>
        <Demo title="根据模板ID获取流程" vertical hide-code>
            <div slot="demo">
                <workFlow
                        v-if="workFlowData"
                        :showDetails="true"
                        :workFlowData="workFlowData"
                        :startSubmit="formSubmitStart"
                        :handlerMap="handlerDefault"
                        @on-submit="formSubmitExec"
                        @on-error="formSubmitError"
                />
            </div>
            <div slot="desc">
                <p>添加表格的边框线。</p>
            </div>
            <i-code lang="vue" slot="code">{{ code.base }}</i-code>
        </Demo>
        <div class="api">
            <Anchor title="API" h2></Anchor>
            <p>参数 config 为对象，具体说明如下：</p>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>startSubmit</td>
                    <td>组件监听父组件属性，当为true 时，调用流程组件逻辑，回调父组件方法</td>
                    <td>Object</td>
                    <td>
                        {
                        state: false
                        }
                    </td>
                </tr>
                <tr>
                    <td> @on-submit</td>
                    <td>当子组件监听startSubmit.state 为 true时，调用的父组件方法，并返回流程驱动数据</td>
                    <td>Function</td>
                    <td>
                        formSubmitExec(item) {
                            console.log(item);
                        },
                    </td>
                </tr>
                <tr>
                    <td>@on-error</td>
                    <td>当子组件监听startSubmit.state 为 true时，捕获异常时调用父组件方法，并返回异常</td>
                    <td>Function</td>
                    <td>
                        formSubmitError(obj) {
                            this.formSubmitStart = {
                                start: false
                            };
                        },
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--<Demo title="根据业务ID获取业务流程" vertical hide-code>-->
            <!--<div slot="demo">-->
                <!--<div-->
                    <!--v-if="workFlowData1">-->
                    <!--<workFlow-->
                            <!--:showDetails="true"-->
                            <!--:workFlowData="workFlowData1"-->
                            <!--:startSubmit="formSubmitStart"-->
                            <!--:handlerMap="handlerDefault"-->
                            <!--@on-submit="formSubmitExec"-->
                            <!--@on-error="formSubmitError"-->
                    <!--/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div slot="desc">-->
                <!--<p>添加表格的边框线。</p>-->
            <!--</div>-->
            <!--<i-code lang="vue" slot="code">{{ code.code }}</i-code>-->
        <!--</Demo>-->
    </div>
</template>

<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';
	import Code from './code/workFlow';
	import iCode from './code/code';

    import workFlow from './workflow/workflowDetail/WorkFlow'


	export default {
		name: 'WorkFlow',
	  data() {
			return {
                formSubmitStart: {
                    start: false
                },
                handlerDefault: {
                },
                workFlowData:null,
                workFlowData1:null,
                code: Code,
                // workFlowDesignState
                workFlowDesignState: {
                    state: false,
                },
			}
		},
		components: {
			Anchor,
			Demo,
			iCode,
            workFlow,
        },
        mounted(){
            this.workFlowData = Code.wfd.data;
            this.workFlowData1 = Code.biz.data;
        },
		methods: {
            formSubmitExec(item) {
                console.log(item);
            },
            formSubmitError(obj) {
                this.formSubmitStart = {
                    start: false
                };
                console.log(obj.msg);
            },
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }
</style>
